import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import classnames from 'classnames';
import { Avatar, Tools } from 'weaver-mobile';
import { RouteLayout, TabPage, ListViewPage } from 'weaver-mobile-page';

const getLabel = Tools.getLabel;

@inject('viewStore')
@observer
export default class ReadList extends Component {
  static defaultProps = {
    prefixCls: 'email-readlist',
  }

  constructor(props) {
    super(props);
    this.state = {
      tabPage: 'total'
    }
  }

  getTemplate = (template) => {
    const newTemp = {
      default: [
        {
          key: 'col_1',
          render: (data) => {
            const { prefixCls } = this.props;
            const cls = `${prefixCls}-list`
            return (
              <div className={cls}>
                <div className={`${cls}-avatar`}>
                  <Avatar name={data.lastname} url={data.messagerurl} userId={data.id} />
                </div>
                <div className={`${cls}-right`} onClick={() => this.props.openHrmCard(data.id)}>
                  <div className={`${cls}-item`}>
                    <div className={`${cls}-item-top`} style={{color:'#55B1F9'}}>
                      {data.lastname}
                    </div>
                    <div className={`${cls}-item-bottom`}>
                      {data.subcompanyid1span}
                    </div>
                  </div>
                  <div className={`${cls}-item`}>
                    <div className={`${cls}-item-top`}>
                      {data.jobtitlespan}
                    </div>
                    <div className={`${cls}-item-bottom`}>
                      {data.departmentidspan}
                    </div>
                  </div>
                </div>
              </div>
            );
          },
        },
      ],
    };
    return newTemp;
  }

  getTemplateReaded = (template) => {
    const newTemp = {
      default: [
        {
          key: 'col_1',
          render: (data) => {
            const { prefixCls } = this.props;
            const cls = `${prefixCls}-list`
            return (
              <div className={cls}>
                <div className={`${cls}-avatar`}>
                  <Avatar name={data.lastname} url={data.messagerurl} userId={data.id} />
                </div>
                <div className={`${cls}-right`} onClick={() => this.props.openHrmCard(data.id)}>
                  <div className={`${cls}-item`}>
                    <div className={`${cls}-item-top`} style={{color:'#55B1F9'}}>
                      {data.lastname}
                    </div>
                    <div className={`${cls}-item-bottom`}>
                      {data.subcompanyname}
                    </div>
                  </div>
                  <div className={`${cls}-item`}>
                    <div className={`${cls}-item-top`}>
                      {data.jobtitlespan}
                    </div>
                    <div className={`${cls}-item-bottom`}>
                      {data.departmentidspan}
                    </div>
                  </div>
                  <div className={`${cls}-item-bottom`}>{getLabel(31971, '阅读时间')}&nbsp;&nbsp;{data.readdate}</div>
                </div>
              </div>
            );
          },
        },
      ],
    };
    return newTemp;
  }

  render() {
    const { prefixCls, viewStore: { readTopList, readedList, unReadList, allReadList } } = this.props;
    const cls = classnames('wm-route-layout', prefixCls);
    const { tabPage } = this.state;
    // key: "total", "readed", "unread"
    const tabs = toJS(readTopList).map(d => {
      return({
        key: d.key,
        title: (
          <div className={`${prefixCls}-tab-item`}>
            <div className={`${prefixCls}-tab-item-count`}>{d.count}</div>
            <div className={`${prefixCls}-tab-item-label`}>{d.label}</div>
          </div>
        )
      });
    });

    return (
      <RouteLayout>
        <div className={cls} key="readList">
          <TabPage
            className={`${prefixCls}-tab`}
            tabs={tabs}
            tabProps={{
              page: tabPage,
              onChange: (tab) => this.setState({ tabPage: tab.key }),
            }}
          />
          <div className={`${prefixCls}-listbox`}>
            {tabPage === 'total' && <ListViewPage.Normal
              store={allReadList}
              getTemplate={this.getTemplate}
            />}
            {tabPage === 'readed' && <ListViewPage.Normal
              store={readedList}
              getTemplate={this.getTemplateReaded}
            />}
            {tabPage === 'unread' && <ListViewPage.Normal
              store={unReadList}
              getTemplate={this.getTemplate}
            />}
          </div>
        </div>
      </RouteLayout>
    );
  }
}